useRefHistory: 作業log
bunで新規PJ作成
bun install
curl -fsSL https://bun.sh/install | bash
fishなのでpath通す
bun create vue@latest
repoName: vue-use-rep
不要なファイル全部削除
vitest入れたけど一旦不要なので削除
あとでテストは書きたい
dir構成
src
App.vue
packages
core
useRefHistory
とりま App.vue に playground 書く
あとで package ごとに書けるようにリファクタする
useRefHistory は色々な package を使っている
メインなところだけ自作してあとは VueUse の使おう
いずれ全部自作できるといい
色々な機能あるけど、とりあえず demo が再現できれば完成とする
useManualRefHistory から作らないといけなそう
まずは型から定義、中身は後回し
型定義は一旦やったので次は中身
option系は一旦指定できなくして良さそう
簡易的に作りたいので
manualの方は一旦option指定なしのを作れた
notManualの方を作っていく
watchIgnorable というのを使っている
履歴に残す時と残さない時があるから、使っているみたい
watchIgnoreable を見よう見まねで実装
sync周りはoption周りで指定できるやつだと思うので一旦省いた
useRefHistory に戻る
watchIgnorable を useRefHistory で使用
setSource を useManualRefHistory にoptionで渡す必要があったので追加
sourceの値を変更する時に、watchを無視して更新する場合があるため
code: packages/useRefHistory/index.ts
function setSource(source: Ref<Raw>, value: Raw) {
ignoreUpdates(() => {
source.value = value;
});
}
できたっぽいので動かしてみる
背景白は見にくいので黒にする
スタイルはどこかでいい感じに当てれるようにしたい
vueUse使ってたところ自作で対応できそうなので作る
useCloned
cloneFnJSON
is.ts
timestamp
最低限の再現にしたいので、不要な箇所削除する
Serialized
commit -> undo -> commit した際に、redoの挙動が変
commitした際に、redoStack に要素がある場合はリセットする必要あった、修正
note tag なんてないよと怒られていたので直す
History を表示している箇所
VueUseのコンポーネントか?
watchIgnorable 理解度低かったので見直し、不要なコード削除
stop のコードがちょっとわからない
code: packages/shared/watchIgnorable/index.ts
stop = () => {
disposables.forEach(fn => fn());
};
disposables には watch をpushしている
watch の解除ってこんなんだったけ?
demo のコードが動く最低限の実装はできたっぽい
理解度はそこそこだが、
実装した VueUse は下記3つ
useRefHistory
useRefManualHistory
watchIgnorable
これからやること
それぞれのpackageでplaygroundを作って動かせるようにする
今は App.vue に直接書いてるので
省いた option 周りを追加した実装もしておきたい
最低限のコードはソースコードとして残しておきたい
別のpackageとして残せるといい
簡単に実装方法を記した記事を書けるといい
vite-press でメインにやってみる
vitepress作成
pagesにデプロイできるようにする
コンセプト
VueUse のコンポーザブルを1から作る
1コンポーザブルのコード量を決める
20分で作れるぐらい
プロジェクト名
VueYou's
キャッチコピー
ロゴ
ogp